<template>
  <div>
    <div class="topgoods">
      <p class="goodnum">小店当前绑定会员卡数 : {{ goodNum }} &nbsp;&nbsp;&nbsp;&nbsp; 已开卡数 : {{ startCard }}</p>
      <el-input placeholder="输入卡号进行搜索" v-model="card_number" clearable size='small' class="goodsname">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="searchGoods"></i>
      </el-input>
    </div>
    <div class="record_line"></div>

    <el-table :data="tableData" style="width:100%" max-height="680" :cell-style="tc" :header-cell-style="tccolor">

      <el-table-column prop="cardNumber" label="卡号" width="160"></el-table-column>
      <el-table-column prop="createTime" label="会员卡创建时间"></el-table-column>


      <el-table-column label='开卡状态' width='120'>
        <template slot-scope="scope">
          <p v-if="scope.row.status == 1">已开卡</p>
          <p v-else>未开卡</p>
          <!-- <p  v-if="scope.row.status == '2'"
            >未开卡</p> -->
        </template>
      </el-table-column>
      <el-table-column prop='uid' label='绑定会员账号'></el-table-column>
      <el-table-column prop="updateTime" label="会员卡绑定时间" width="240"></el-table-column>
    </el-table>
    <!--
   @size-change="handleSizeChange" -->
    <el-col :span="24">
      <div class="pagination">

        <el-pagination background @current-change="pageChange" :current-page="query.pageNum" :page-size="query.pageSize"
          layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import { detailShopVipCard } from "@/api/store"
export default {
  props: ['shopId'],
  data() {
    return {
      goodNum: 0,
      startCard: 0,
      card_number: '',
      page: 1,
      total: 0,
      tableData: [],
      query: {
        pageNum: 1,
        pageSize: 10,
        // keyword:''
        // sellerId:0,
        // productId:0,
        // productName:0
      }
    }
  },
  mounted() {
    console.log(this.shopId)
    this.getshopXiCardData(this.shopId)

  },
  watch: {
    shopId(newValue) {
      if (newValue) {
        this.getshopXiCardData(this.shopId)
      }
    }
  },
  methods: {
    async getshopXiCardData(shopId) {
      var url = "page=" + this.page +
        "&card_number=" + this.card_number
      let res = await detailShopVipCard(shopId, this.query)
      this.goodNum = res.data.bind_count
      this.startCard = res.data.total
      this.tableData = res.data.list
      this.total = res.data.total
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

    isUseActivityChange(id, e) {
      //更新成功后重新获取商品
      // this.getshoptypeopenorclose(id, e);
      console.log('id:' + id + ',e:' + e)
    },
    searchGoods() {
      this.query.pageNum = 1
      this.getshopXiCardData(this.shopId)
    },
    pageChange(page) {
      this.query.pageNum = page;
      this.getshopXiCardData(this.shopId)
    },
  }
}
</script>

<style lang="scss" scoped>
.topgoods {
  height: 30px;

  .goodnum {
    float: left;
    width: 400px;
  }

  .goodsname {
    float: right;
    width: 200px;
    margin-top: -5px;
  }
}

.record_line {
  margin: 10px 0;
  height: 1px;
  background-color: #e6e6e6;
}

.doing {
  color: blue;
}

.success {
  color: green;
}

.failure {
  color: red;
}

.operate_info {
  float: left;
}

.status—desc {
  float: right;
}

.pagination {
  float: right;
  margin-top: 15px;
}
</style>
